<template>
  <div>
    <h1>{{ title }}</h1>
    <!-- ref绑定在自定义组件中，则得到对应其实例对象 -->
    <child ref="childRef"></child>
    <button @click="setTitle">修改子组件中的title数据</button>
  </div>
</template>

<script>
import child from '@/components/child.vue'

export default {
  data() {
    return {
      title: ''
    }
  },
  components: {
    child
  },
  methods: {
    setTitle() {
      // console.log(this.$refs.childRef)
      // this.$refs.childRef.title = Date.now()
      // console.log(this.$refs.childRef.username)
      // this.title = this.$refs.childRef.title
      let msg = this.$refs.childRef.setSubTitle(Date.now())

      this.title = msg
    }
  }
}
</script>

<style lang="scss" scoped></style>
